<template>
  <div>
    <div v-if="model=='line'">
      <sensor-data
        :show-hidden="showHidden"
        :edit-model="editModel"
        :sensor-id="sensor.sensorId"
        style="width: 100%"
      />
    </div>
    <el-row v-else-if="model=='block'" :gutter="5">
      <el-col
        v-for="(item,index) in sensor.explainList"
        :key="index"
        :span="item.spanMultiple * 8"
      >
        <div
          v-if="editModel || showHidden === '1' || !item.hidden"
          :class="[ item.warnNum > 0 ? 'warn':'', editModel ? 'hidden-border':'item-border','item', searchName !== '' && item.name.indexOf(searchName) >= 0 ? 'check' :'']"
        >
          <div @click.stop="explainClick(item)">
            <div class="flex">
              <div @click.stop>
                <device-explain-icon :explain="item" />
              </div>
              <div v-if="item.editExplain" @click.stop="">
                <el-input v-model="item.remark">
                  <template
                    slot="prepend"
                  >{{ item.name }}
                  </template>
                  <el-button
                    slot="append"
                    icon="el-icon-check"
                    @click.stop="updateExplainName(item)"
                  />
                  <el-button
                    slot="append"
                    icon="el-icon-close"
                    @click.stop="cancelUpdateExplainName(item)"
                  />
                </el-input>
              </div>
              <div v-else style="flex-grow: 1;margin-left: 5px">
                <div
                  class="text-xs text-gray-500 flex justify-between"
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >
                  <div @click.stop="showEditExplain(item)">
                    <el-popover
                      v-if="item.remark && item.remark!==''"
                      placement="top"
                      width="200"
                      trigger="hover"
                      :content="item.name"
                    >
                      <span slot="reference">{{ item.remark }}</span>
                    </el-popover>
                    <span v-else>{{ item.name }}</span>
                    <i
                      v-if="enableEval === '1' && item.value != '' && !isNaN(Number(item.value)) && item.lastValue != '' && !isNaN(Number(item.lastValue))"
                      :class="item.value > item.lastValue ? 'el-icon-top':'el-icon-bottom'"
                    />
                    <i
                      v-else-if="item.value != '' && !isNaN(Number(item.value)) && item.lastValue != '' && !isNaN(Number(item.lastValue))"
                      :class="item.rawValue > item.lastRawValue ? 'el-icon-top':'el-icon-bottom'"
                    />
                  </div>
                  <div class="text-gray-400">
                    <div v-if="editModel">
                      <span v-if="item.hidden" class="el-icon-view" @click.stop="showExplain(item)" />
                      <span v-else class="el-icon-close" @click.stop="hiddenExplain(item)" />
                    </div>
                  </div>
                </div>
                <div
                  class="text-gray-400 text-xs"
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >{{
                  formatDate(item.valueDate)
                }}
                </div>
              </div>
            </div>
            <div style="padding-top: 8px">
              <div class="flex justify-center" style="flex-wrap: wrap ">
                <div
                  v-for="(split,index2) in (enableEval ? item.value.split(',') : item.rawValue.split(','))"
                  :key="index2"
                  class="mx-2"
                >
                  <countTo
                    v-if="split != '' && !isNaN(Number(split))"
                    :start-val="0"
                    :end-val="Number(split)"
                    :duration="2000"
                    :suffix="item.unit"
                    style="line-height: 55px;font-size: 25px;"
                    class="primary-color"
                    :decimals="isDecimal(split) ? 2 : 0"
                  />
                  <div
                    v-else
                    class="primary-color"
                    style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 25px;line-height: 55px;height: 55px;font-weight: lighter;text-align: center"
                  >
                    <span>{{ split }}</span>
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </div>
              <div class="flex justify-between" style="overflow: hidden">
                <div style="font-size: 12px;color:#909399">
                  {{ $t('frequency') + ':' + formatterSeconds(item.updateFrequency) }}
                </div>
                <div
                  style="font-size: 12px;color: #909399;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >
                  <span v-if="item.minVal || item.maxVal">{{ item.minVal }}~{{ item.maxVal }}</span>
                  <span v-else-if="enableEval === '1'">{{ item.rawValue }}{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-else-if="model=='list'">
      <div
        v-for="(item,index) in sensor.explainList"
        :key="index"
        @click="explainClick(item)"
      >
        <div
          v-if="editModel || !item.hidden"
          class="flex justify-between content-center"
          style="margin-bottom: 5px;padding: 8px"
          :class="[ item.warnNum > 0 ? 'warn':'',editModel ? 'hidden-border':'item-border','item', searchName != ''&&item.name.indexOf(searchName) >= 0 ? 'check' :'']"
        >
          <div class="flex content-center">
            <div style="margin-right: 5px;margin-top: 3px" @click.stop>
              <device-explain-icon :explain="item" />
            </div>
            <div v-if="item.editExplain" @click.stop="">
              <el-input v-model="item.remark">
                <template
                  slot="prepend"
                >{{ item.name }}
                </template>
                <el-button
                  slot="append"
                  icon="el-icon-check"
                  @click.stop="updateExplainName(item)"
                />
                <el-button
                  slot="append"
                  icon="el-icon-close"
                  @click.stop="cancelUpdateExplainName(item)"
                />
              </el-input>
            </div>
            <div v-else>
              <div class="text-sm" @click.stop="showEditExplain(item)">
                <el-popover
                  v-if="item.remark && item.remark!==''"
                  placement="top"
                  width="200"
                  trigger="hover"
                  :content="item.name"
                >
                  <span slot="reference">{{ item.remark }}</span>
                </el-popover>
                <span v-else>{{ item.name }}</span>
                <i
                  v-if="enableEval === '1' && item.value != '' && !isNaN(Number(item.value)) && item.lastValue != '' && !isNaN(Number(item.lastValue))"
                  :class="item.value > item.lastValue ? 'el-icon-top':'el-icon-bottom'"
                />
                <i
                  v-else-if="item.value != '' && !isNaN(Number(item.value)) && item.lastValue != '' && !isNaN(Number(item.lastValue))"
                  :class="item.rawValue > item.lastRawValue ? 'el-icon-top':'el-icon-bottom'"
                />
              </div>
              <div class="text-gray-400">{{ formatDate(item.valueDate) }}</div>
            </div>
          </div>
          <div>
            <div v-if="editModel">
              <el-button
                v-if="item.hidden"
                icon="el-icon-view"
                @click.stop="showExplain(item)"
              />
              <el-button
                v-else
                icon="el-icon-close"
                @click.stop="hiddenExplain(item)"
              />
            </div>
            <div
              v-else
              class="primary-color text-lg font-bold mt-1"
            >
              <span>{{ item.value }}</span>
              <span class="text-sm">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="showExplainInfo"
      append-to-body
      destroy-on-close
      width="1300px"
      top="15px"
    >
      <device-explain-info v-if="showExplainInfo" :explain="explain" />
    </el-dialog>

  </div>
</template>

<script>
import { formatDate, successNotice } from '@/util/common'
import DeviceExplainIcon from '@/components/DeviceExplainIcon'
import DeviceExplainInfo from '@/components/DeviceExplainInfo'
import SensorData from '../SensorData'
import { updateExplain } from '@/api/iot/iotDeviceExplainApi'
import countTo from 'vue-count-to'

export default {
  name: 'DeviceExplain',
  components: {
    countTo,
    DeviceExplainIcon,
    DeviceExplainInfo,
    SensorData
  },
  props: {
    sensor: {
      type: Object,
      default: null
    },
    deviceStatus: {
      type: String,
      default: null
    },
    enableEval: {
      type: String,
      default: null
    },
    model: {
      type: String,
      default: 'list'
    },
    searchName: {
      type: String,
      default: null
    },
    editModel: {
      type: Boolean,
      default: false
    },
    showHidden: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      showExplainInfo: false,
      explain: {},
      time: Math.round(new Date().getTime() / 1000)
    }
  },
  watch: {
    sensor: {
      deep: true,
      handler(val) {
        this.time = Math.round(new Date().getTime() / 1000)
        this.formatExplain()
      }
    }
  },
  created() {
    this.formatExplain()
  }, methods: {
    isDecimal(x) {
      if (String(x).indexOf('.') >= 0) {
        return true
      }
      return false
    },
    formatExplain() {
      for (const explain of this.sensor.explainList) {
        if (!explain.editExplain) {
          explain.editExplain = false
        }
        if (this.enableEval === '1') {
          if (explain.value.length > 6) {
            explain.spanMultiple = 2
          } else {
            explain.spanMultiple = 1
          }
        } else {
          if (explain.rawValue.length > 6) {
            explain.spanMultiple = 2
          } else {
            explain.spanMultiple = 1
          }
        }

        let splitList = null
        if (this.enableEval === '1') {
          splitList = explain.value.split(',')
        } else {
          splitList = explain.rawValue.split(',')
        }
        if (splitList) {
          if (splitList.length !== 1) {
            if (splitList.length < 5) {
              explain.spanMultiple = 2
            } else {
              explain.spanMultiple = 3
            }
          }
        }
      }
    },
    showEditExplain(item) {
      for (const i in this.sensor.explainList) {
        if (this.sensor.explainList[i].explainId === item.explainId) {
          item.editExplain = true
          this.sensor.explainList.splice(i, 1, item)
          break
        }
      }
    },
    cancelUpdateExplainName(item) {
      for (const i in this.sensor.explainList) {
        if (this.sensor.explainList[i].explainId === item.explainId) {
          item.editExplain = false
          this.sensor.explainList.splice(i, 1, item)
          break
        }
      }
    },
    updateExplainName(item) {
      updateExplain({
        explainId: item.explainId,
        remark: item.remark
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        for (const i in this.sensor.explainList) {
          if (this.sensor.explainList[i].explainId === item.explainId) {
            item.editExplain = false
            this.sensor.explainList.splice(i, 1, item)
            break
          }
        }
      })
    },
    hiddenExplain(item) {
      const hidden = true
      updateExplain({
        explainId: item.explainId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    showExplain(item) {
      const hidden = false
      updateExplain({
        explainId: item.explainId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    formatterSeconds(time) {
      if (time > 3600) {
        return parseInt(time / 3600) + this.$t('hour')
      } else if (time > 60) {
        return parseInt(time / 60) + this.$t('minutes')
      } else {
        return time + this.$t('seconds')
      }
    },
    explainClick(item) {
      this.explain = item
      this.showExplainInfo = true
    }
  }
}
</script>

<style scoped lang="scss">

@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.item {
  margin-top: 5px;
  padding: 10px;
  border-color: rgba(0, 0, 0, .1);
  border-width: 1px;
  border-radius: 8px;
}

.item-border {
  border-style: solid;
}

.hidden-border {
  border-style: dashed;
}

.warn {
  background: #f59b9a;
}

.check {
  background-color: #ebeef5;
}

.item:hover {
  background-color: #efefef;
}

.config-item {
  margin-top: 2px;
  padding: 3px;
  /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);*/
  border-radius: 5px;
  height: 35px;
  width: 100%;
  display: flex;
  justify-content: space-between
}

.config-item:hover {
  background: #E4E7ED;
}
</style>
